<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS with codemirror</title>
    <link rel="stylesheet" href="__STATIC__/libs/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="__STATIC__/libs/codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" href="__STATIC__/libs/codemirror/addon/fold/foldgutter.css" />
    <link rel="stylesheet" href="__STATIC__/libs/codemirror/theme/monokai.css">
    <link rel="stylesheet" href="__STATIC__/libs/codemirror/addon/scroll/simplescrollbars.css">

    <script src="__STATIC__/libs/codemirror/lib/codemirror.js"></script>
    <script src="__STATIC__/libs/codemirror/lib/codemirror.js"></script>
    <script src="__STATIC__/libs/codemirror/mode/css/css.js"></script>
    <script src="__STATIC__/libs/codemirror/addon/fold/foldcode.js"></script>
    <script src="__STATIC__/libs/codemirror/addon/fold/foldgutter.js"></script>
    <script src="__STATIC__/libs/codemirror/addon/fold/brace-fold.js"></script>
    <script src="__STATIC__/libs/codemirror/addon/fold/xml-fold.js"></script>
    <script src="__STATIC__/libs/codemirror/addon/fold/indent-fold.js"></script>
    <script src="__STATIC__/libs/codemirror/addon/fold/markdown-fold.js"></script>
    <script src="__STATIC__/libs/codemirror/addon/fold/comment-fold.js"></script>
    <script src="__STATIC__/libs/codemirror/addon/hint/show-hint.js"></script>
    <script src="__STATIC__/libs/codemirror/addon/hint/css-hint.js"></script>
    <script src="__STATIC__/libs/codemirror/addon/display/fullscreen.js"></script>
    <script src="__STATIC__/libs/codemirror/addon/scroll/simplescrollbars.js"></script>
    <style>
        .CodeMirror {
            background: #f8f8f8;
        }
    </style>
</head>

<body>
    <article>
        <h2>CSS mode</h2>
        <form>
            <textarea id="code" name="code">
/* Some example CSS */

@import url("something.css");

body {
  margin: 0;
  padding: 3em 6em;
  font-family: tahoma, arial, sans-serif;
  color: #000;
}

#navigation a {
  font-weight: bold;
  text-decoration: none !important;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.7em;
}

h1:before, h2:before {
  content: "::";
}

code {
  font-family: courier, monospace;
  font-size: 80%;
  color: #418A8A;
}
</textarea>
        </form>
        <script>
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                styleActiveLine: true,
                theme: 'monokai',
                matchBrackets: true,
                lineNumbers: true,
                lineWrapping: true,
                extraKeys: {
                    "Ctrl-Space": "autocomplete",
                    "Ctrl-Q": function (cm) {
                        cm.foldCode(cm.getCursor());
                    },
                    "F11": function (cm) {
                        cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                    },
                    "Esc": function (cm) {
                        if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                    }
                },
                scrollbarStyle: "simple",
                foldGutter: true,
                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
            });
        </script>
    </article>
</body>

</html>